<template>
  <div class="app-wrapper">
    <headerTitle :titleList="titleList" :hideButton="true" />
    <div class="app-container">
      <div class="block containerMain" ref="block">
        <div class="tab-container">
          <div class="con-title">技能组基本信息</div>
          <el-form
            style="width: 78%; margin-left: 60px"
            ref="ruleForm1"
            :model="infoForm"
            :rules="addrules"
            label-width="80px"
            autocomplete="off"
          >
            <el-form-item label="技能组名称" prop="name" label-width="120px">
              <div class="elform-item">
                <el-input
                  class="item"
                  size="small"
                  placeholder="请输入技能组名称"
                  v-model="infoForm.name"
                  :disabled="type != 3"
                ></el-input>
                <!-- <span v-if="viewShow" class="item-span">4-20位字符，可由数字字母组成，字母区分大小写</span> -->
              </div>
            </el-form-item>
            <el-form-item
              label="坐席服务策略"
              prop="agentVideoNum"
              label-width="120px"
            >
              <div class="elform-item">
                <el-select
                  size="mini"
                  clearable
                  v-model="infoForm.tactic"
                  :disabled="type == 1"
                >
                  <el-option label="通话时长均衡" :value=1></el-option>
                  <el-option label="通话数量均衡" :value=2></el-option>
                  <el-option label="坐席累计置闲最久优化" :value=3></el-option>
                  <el-option label="坐席最近置闲最久优化" :value=4></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="技能组状态" prop="enable" label-width="120px">
              <!-- <div class="elform-item" > -->
              <el-radio-group v-model="infoForm.enable" :disabled="type == 1">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
              <!-- </div> -->
            </el-form-item>

            <el-form-item label="优先级" label-width="120px">
              <el-input
                style="width: 40%"
                size="small"
                @input="infoForm.sort = infoForm.sort.replace(/[^\d]/g, '')"
                :disabled="type == 1"
                v-model="infoForm.sort"
              ></el-input>
            </el-form-item>
            <el-form-item label="技能组描述" prop="remark" label-width="120px">
              <el-input
                type="textarea"
                style="width: 40%"
                size="small"
                :disabled="type == 1"
                placeholder="请输入技能组描述"
                v-model="infoForm.remark"
              ></el-input>
            </el-form-item>
          </el-form>
          <div style="width: 78%; margin-left: 70px">
            <el-button
              size="mini"
              v-if="type == '1'"
              type="default"
              @click="cancel()"
              >返回</el-button
            >
            <el-button size="mini" v-else type="default" @click="cancel()"
              >取消</el-button
            >
            <el-button
              size="mini"
              type="primary"
              v-if="type != 1"
              @click="saveAdd()"
              >保存</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MD5 from "js-md5";
import HeaderTitle from "@/components/Headertitle/index";
import { fetchDetail, fetchCreate, fetchEdit } from "@/api/systemapi/skill";
import { translateDataToTree } from "@/utils";
export default {
  components: {
    HeaderTitle,
  },
  data() {
    var checkAgentId = (rule, value, callback) => {
      var res = /^[a-zA-Z0-9]/;
      if (!value) {
        return callback(new Error("坐席编号不能为空"));
      } else if (!res.test(value)) {
        return callback(new Error("坐席编号不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    var checkAgentVideoNum = (rule, value, callback) => {
      var res = /^[a-zA-Z0-9]/;
      if (!value) {
        return callback(new Error("坐席视讯号不能为空"));
      } else if (!res.test(value)) {
        return callback(new Error("坐席视讯号不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    var checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("确认密码不能为空"));
      } else if (value != this.infoForm.password) {
        return callback(new Error("两次密码输入不一致"));
      } else {
        return callback();
      }
    };
    var checkuserPhone = (rule, value, callback) => {
      var res = /^1[3456789]\d{9}$/;
      if (!value) {
        return callback();
      } else if (!res.test(value)) {
        return callback(new Error("手机号码不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      var res = /@/;
      if (!value) {
        return callback();
      } else if (!res.test(value)) {
        return callback(new Error("邮箱不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    return {
      titleList: [{ title: "技能组管理" }, { title: "新增技能组" }],
      type: "", //1查看2编辑3新增
      viewShow: true, // 查看展示
      infoForm: {
        name: "", // 技能组名称
        tactic: 1, // 策略
        sort: "", // 优先级
        remark: "", // 描述
        enable: 1, //技能组状态
      },
      addrules: {
        name: [
          { required: true, message:"请输入技能组名称", trigger: "blur" },
          { min: 3, max: 5, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // agentVideoNum: [
        //   { required: true, validator: checkAgentVideoNum, trigger: "blur" },
        // ],
      },
      editrules: {
        name: [
           { required: true, message:"请输入技能组名称", trigger: "blur" },
        ]
      },
    };
  },
  mounted() {
    this.type = this.$route.query.type;
    if (this.type == "3") {
      this.titleList[1].title = "新增技能组";
      this.editid = this.$route.query.id;
      this.getEditData(this.$route.query.id);
    }
    if (this.type == "2") {
      this.titleList[1].title = "编辑技能组";
      this.editid = this.$route.query.id;
      this.getEditData(this.$route.query.id);
    }
    if (this.type == "1") {
      this.titleList[1].title = "查看技能组";
      this.getEditData(this.$route.query.id);
    }
  },
  computed: {
    // formrules: function () {
    //   // if (this.type == "2") {
    //   //   return this.editrules;
    //   // } else
    //   if (this.type == "3") {
    //     return this.addrules;
    //   } else if(this.type == "2") {
    //     return this.editrules;
    //   } 
    // },
  },
  methods: {
    cancel() {
      this.$router.push("/system/skill/list");
    },

    getEditData(id) {
      fetchDetail({ id: id }).then((res) => {
        console.log(res)
        res.data.password = null;
        this.infoForm = res.data;
      });
    },
    // inputFn() {
    //   this.infoForm.phoneNum=this.infoForm.phoneNum.replace(/[^\d]/g,'')
    //   // value=value.replace(/[^\d]/g,'')
    // },
    saveAdd() {
      const p1 = new Promise((resolve, reject) => {
        this.$refs["ruleForm1"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });

      Promise.all([p1]).then(() => {
        console.log("验证通过,提交表单");
        if (this.type == "2") {
          fetchEdit({
            id: this.editid,
            ...this.infoForm,
          }).then((response) => {
            if (response.code == 0) {
              this.cancel();
            } else {
              this.$message({
                type: "error",
                message: response.msg,
              });
            }
          });
        } else {
          console.log("create11","1111")
          fetchCreate({
            ...this.infoForm
          }).then((response) => {
            if (response.code == 0) {
              this.cancel();
            } else {
              this.$message({
                type: "error",
                message: response.msg,
              });
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .app-container {
    .block {
      width: 100%;
      height: 100%;
      background: #fff;
      .tab-container {
        width: 100%;
        margin-top: 15px;
        .con-title {
          margin-bottom: 15px;
          font-size: 14px;
          color: #666;
          font-weight: bold;
          margin-left: 10px;
        }
        .elform-item {
          display: flex;
          .item {
            width: 40%;
            margin-right: 20px;
          }
          .item-span {
            color: #ccc;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>
